<template>
    <div>
        <a-card class="searchForm mb-twelve">
            <a-form-model :model="searchForm" layout="inline" :colon="false">
                <a-form-model-item prop="deviceName" label="设备名称">
                    <a-input style="color: #000" v-model="searchForm.deviceName" placeholder="请输入设备名称" />
                </a-form-model-item>
                <a-form-model-item>
                    <a-button @click="search" type="primary">查询</a-button>
                    <a-button @click="reset" class="btn-reset">重置</a-button>
                </a-form-model-item>
            </a-form-model>
        </a-card>
        <a-card>
            <div class="list">
                <a-row :gutter="[16, 16]">
                    <a-col :span="8" v-for="(item, index) in list" :key="index">
                        <div class="list-name">{{item.deviceName}}</div>
                        <div>
                          <video  :src="item.address" controls style="width: 100%;">
                          </video>
                        </div>
                    </a-col>
                </a-row>
            </div>

            <div style="text-align: center;" v-if="total > 0">
                <a-pagination :total="total" :current="searchForm.page" :page-size.sync="searchForm.pageSize"
                    :page-size-options="$pageSizeOptions" @change="handlePageNo" @showSizeChange="showSizeChange"
                    show-size-changer />
            </div>
        </a-card>
    </div>
</template>

<script>
import {dataSource as ds} from "@/services";
export default {
    name: "monitorVideo",
    data() {
        return {
          list:[],
            searchForm: {
                page: 1,
              pageSize: 15
            },
            total: 20,
        }
    },
  mounted() {
    this.getData();
  },
    methods: {
      //搜索
      search(){
        this.searchForm.page=1;
        this.getData()
      },
      //重置
      reset(){
        this.searchForm={
          page: 1,
          pageSize: 15
        }
        this.getData()
      },
      getData() {
        let data=this.searchForm;
        console.log(data)
        this.list=[]
        ds.videoList(data).then(res => {
          console.log(res)
          this.list = res.data.data.list
          this.total = res.data.data.total
        })
      },
        showSizeChange(current, pageSize) {
            this.searchForm.pageSize = pageSize
          this.getData()
        },
        handlePageNo(current) {
            this.searchForm.page = current
          this.getData()
        },
    }
}
</script>
<style scoped lang="less">
.list{
    margin-bottom: 20px;
}
.list-name {
    height: 46px;
    background: rgba(12, 12, 12, 0.4);
    font-weight: bold;
    font-size: 16px;
    color: #FFFFFF;
    text-align: center;
    line-height: 46px;
}

/deep/.ant-pagination-prev .ant-pagination-item-link,
.ant-pagination-next .ant-pagination-item-link {
    background-color: #42487A;
    border-color: #999da0;
    color: #898a94;
}

/deep/.ant-pagination-next .ant-pagination-item-link {
    background-color: #42487A;
    border-color: #999da0;
    color: #898a94;
}

/deep/ .ant-pagination-item {
    background-color: #42487A;
    border-color: #999da0;

}

/deep/ .ant-pagination-item a {
    color: #898a94;
}

/deep/ .ant-pagination-item-active {
    border-color: #fff;
}

/deep/ .ant-pagination-item-active a {
    color: #fff;
}

/deep/ .ant-select-selection {
    background-color: #42487A;
    border-color: #999da0;
    color: #898a94;
}
</style>
